{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">薪资分析可视化</h1>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title mb-0"><i class="fas fa-chart-box me-2"></i>各城市薪资箱线图</h5>
        <p class="card-text">展示各城市薪资的中位数、四分位数及异常值分布</p>
        <img src="data:image/png;base64,{{ boxplot_url }}" class="img-fluid" alt="薪资箱线图">
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title mb-0"><i class="fas fa-th me-2"></i>行业-城市薪资热力图</h5>
        <p class="card-text">按行业和城市交叉分析薪资水平，颜色深浅代表薪资高低</p>
        <img src="data:image/png;base64,{{ heatmap_url }}" class="img-fluid" alt="薪资热力图">
    </div>
</div>
{% endblock %}
